<template>
  <div class="search-bar">
    <el-form :inline="true" :model="formItem" class="form-filter" size="mini">
      <el-form-item>
        <el-select v-model="formItem.s_unitCode" clearable style="width: 200px" placeholder="请服务厅局">
          <el-option
            v-for="item in unitLists"
            :key="item.unitCode"
            :label="item.unitName"
            :value="item.unitCode"
            @keyup.enter.native="search"
            @change="search"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formItem.s_status" clearable style="width: 200px" placeholder="完成状态">
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.name"
            :value="item.value"
            @keyup.enter.native="search"
            @change="search"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="formItem.s_registerRemarks"
          clearable
          style="width: 200px"
          placeholder="请输入备注..."
          @keyup.enter.native="search"
          @change="search"
        />
      </el-form-item>
      <el-form-item>
        <el-button plain icon="el-icon-search" @click="search" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { list as institutionsList } from '@neu/dcom-ui/api/institutions'
// 定义一个查询表单原始项
const formItem = {
  s_registerRemarks: '',
  s_unitCode: '',
  s_status: null
}

export default {
  name: 'RegisterTaskFilter',
  data() {
    return {
      formItem: {
        ...formItem
      },
      unitLists: [],
      status: [
        {
          name: '未完成',
          value: 'pending'
        },
        {
          name: '已完成',
          value: 'completed'
        }
      ]
    }
  },
  created() {
    institutionsList().then(response => {
      this.unitLists = response.data.map(e => { return { unitCode: e.code, unitName: e.name } })
    })
  },
  methods: {
    // 查询按钮点击事件处理
    search: function() {
      this.$parent.filter(this.formItem)
    },
    // 重置按钮点击事件处理
    reset: function() {
      this.formItem = {
        ...formItem
      }
      this.search()
    }
  }
}
</script>
